<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.ziqiangxuetang.com/media/django/csrf.js"></script>
<script>
$(document).ready(function(){
	$("#sum").click(function(){
		var a = $("#a").val();
		var b = $("#b").val();

		$.get("/add/",{"a":a,"b":b},function(ret){
			$("#result").html(ret);
		});

	});

	$("#list").click(function(){
		$.getJSON({% url 'list' %}, function(ret){
			for(var i=ret.length-1; i>=0; i--){
				$("#list_result").append(" "+ret[i]);	
			}	
		})	

	});

	$("#dict").click(function(){
		$.getJSON({% url 'dict' %}, function(ret){
			$("#dict_result").append(ret.cityking+"<br>");
		})
	});

	$("#complex").click(function(){
		$.getJSON({% url 'complex' %}, function(ret){
			$.each(ret, function(i, item){
				$("#complex_result").append(item.name+":"+item.age+"<br>");
			})	
		});	
	});

	$(".get-more").click(function(){
		$.ajax({
			type: "GET",
			url: {% url "more_poems" %},
			dataType: "json",
			success: function(data){
				json_str = JSON.stringify(data);
				json_data = JSON.parse(json_str);
				for(var i in json_data){
					item = json_data[i];
					$('ul').append("<li>"+item.title+" "+item.author+"</li>");

				}
			}
		});	
	});

	$(".add-poem").click(function(){
		$.ajax({
			type:"POST",
			url:{% url "add_poems" %},
			dataType:"text",
			data:{"poems":$(".textArea").val()},
			success:function(data){
				alert(data);	
			}
		});	
	});
});
</script>
</head>
<body>
{% csrf_token %}
<p>请输入两个数字：</p>
<form action="/add/" method="get">
a:<input type="text" name="a" id="a"><p>
b:<input type="text" name="b" id="b"><p>
<p>result:<span id="result"></span></p>
<button type="button" id="sum">提交</button>
</form>

<div id="list">Ajax 加载列表</div>
<p id="list_result"></p>
<div id="dict">Ajax 加载字典</div>
<p id="dict_result"></p>
<div id="complex">Ajax 加载复杂字典列表</div>
<p id="complex_result"></p>


<div class="container">
	<div class="container">
		<h3>Poems:</h3>	
		<ul id="ul">
			<li>Results:</li>
		</ul>
		<button class="btn get-more">Get More Poem</button>
	</div>
	<div class="container">
		<label>Poems</label>
		<textarea class="textArea" id="textArea" rows="10" clos="70"></textarea>
		<button class="btn add-poem">add poem</button>
	</div>
</div>
</body>
</html>
